<template>
	<view class="" style="width: 100vw;height: 100vh;">
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<image v-if="ktheme == 'black'" class="bg-top" style="opacity: 0.3;" src="/static/index/black/home-bg-black.png" mode="aspectFit"></image>
			<view class="wrapper">
				<view class="contain">
					<view class="userWrap">
						<view class="userCont" :class="ktheme == 'black' ? 'user-headerBg-black': 'user-headerBg-white'">
							<view class="author" v-if="hasLogin">
								<image class="avatar" v-if="userInfo.avatar && userInfo.avatar.includes('http')" :src="userInfo.avatar" @error="avatarDefaultImage()" mode="aspectFill"></image>
								<image class="avatar" v-if="!userInfo.avatar" src="../../static/logo.png" mode="aspectFill"></image>
								<image class="avatar" v-if="(userInfo.avatar && !userInfo.avatar.includes('http'))" src="../../static/logo.png"  mode="aspectFill"></image>
								<view class="user">
									<view class="name">
										<text :class="ktheme == 'black' ? 'user-headerText-black': 'user-headerText-white'">{{userInfo.nickname}}</text>
											<image class="apply-img" v-if="userAccount.isCertified && ktheme == 'black'" src="/static/user/user-authed.png" mode="widthFix"></image>
											<image class="apply-img" v-if="userAccount.isCertified && ktheme == 'purple'" src="/static/user/apply-img-white.png" mode="widthFix"></image>
											<image class="apply-img"  v-if="!userAccount.isCertified"  src="/static/user/apply-img2.png" mode="widthFix"></image>
									</view>
									<view class="tel" :class="ktheme == 'black' ? 'user-headerText-black': 'user-headerText-white'">{{userAccount.phone}}</view>
								</view>
							</view>
							<view class="author" v-else @tap="navto()">
								<image class="avatar" :src="logoImage" mode="aspectFill"></image>
								<view class="user">
									<view class="name" :class="ktheme == 'black' ? 'user-headerText-black': 'user-headerText-white'">未登录</view>
									<view class="tip" :class="ktheme == 'black' ? 'user-headerText-black': 'user-headerText-white'">点击去登录</view>
								</view>
							</view>
							<!-- <view class="areacode" @tap="copy(userInfo.chainAddress)">
								<view class="code" :style="{'color': knormalColor}">
									<text>区块链地址</text>
									<text>{{userInfo.chainAddress ||'********实名后自动生成********'}}</text>
								</view>
								<image class="copy" src="/static/user/code_copy.png" mode="scaleToFill"></image>
							</view> -->
							<view class="operate">
								<view class="item" :class="ktheme == 'black' ? 'operate-bg-black': 'operate-bg-white'" @tap="navto('/pages/user/point/point')">
									<image v-if="ktheme == 'purple'" style="width: 36rpx;" src="/static/user/icon_fenhong.png" mode="widthFix"></image>
									<image v-if="ktheme == 'black'" src="/static/user/black/mine-award-black.png" mode="widthFix"></image>
									<text :style="{'color': knormalColor}">我的金库</text>
								</view>
								<view class="item" :class="ktheme == 'black' ? 'operate-bg-black': 'operate-bg-white'" @tap="thishi">
									<image v-if="ktheme == 'purple'" src="/static/user/icon_wallet.png" mode="scaleToFill"></image>
									<image v-if="ktheme == 'black'" src="/static/user/black/mine-wallet-black.png" mode="aspectFit"></image>
									<text :style="{'color': knormalColor}">我的钱包</text>
								</view>
							</view>
						</view>
						<image v-if="ktheme == 'purple'" class="setting" src="/static/user/user_settings.png" mode="scaleToFill"
							@tap="navto('/pages/user/settings/settings')"></image>
						<image v-if="ktheme == 'black'" class="setting" src="/static/user/black/user-setting-black.png" mode="aspectFit"
							@tap="navto('/pages/user/settings/settings')"></image>
					</view>
					<view class="menuWrap" :style="{'background': (ktheme == 'purple' ? '#ffffff': '#161616')}">
						<template v-for="(item, index) in menuList">
							<view class="item" :key="index"   @tap="navto(item.url)">
								<image v-if="ktheme == 'purple'" class="item-img-white" :src="item.icon" mode="aspectFit"></image>
								<image v-if="ktheme == 'black'" class="item-img-black" :src="item.icon1" mode="aspectFit"></image>
								<view class="label" :style="{'color': knormalColor}">{{item.name}}</view>
							</view>
						</template>
					</view>
				<!-- 	<view class="menuWrap" :style="{'background': (ktheme == 'purple' ? '#ffffff': '#161616')}">
						<template v-for="(item, index) in menuList1">
							<view class="item" :key="index"   @tap="navto(item.url)">
								<image v-if="ktheme == 'purple'" class="item-img-white" :src="item.icon" mode="aspectFit"></image>
								<image v-if="ktheme == 'black'" class="item-img-black" :src="item.icon1" mode="aspectFit"></image>
								<view class="label" :style="{'color': knormalColor}">{{item.name}}</view>
							</view>
						</template>
					</view> -->
				</view>
				<template v-if="$db.get('userToken') && list && list.length > 0">
					<view class="sticky">
						<!-- 版权分类 -->
						<view class="tab_box">
							<template v-for="(item, index) in typeList">
								<view class="tab_dd" :style="[tabNormaleStyle]" :key="index">
								  <image src="/static/index/black/title_left.png">
								  <text>{{item.name}}</text>
								  <image src="/static/index/black/title_right.png">
								</view>
							</template>
						</view>
						<view class="gridStyle" @click="changeGoodsGridStyle">
							<view class="grid-text"></view>
							<image class="grid-image" v-if="ktheme == 'black' && !goodsGridStyle" src="../../static/user/black/user-goods-black.png"></image>
							<image class="grid-image" v-if="ktheme == 'black' && goodsGridStyle" src="../../static/user/black/user-goods-card-black.png"></image>
							<image class="grid-image" v-if="ktheme != 'black' && !goodsGridStyle" src="../../static/user/black/user-goods-pruple.png"></image>
							<image class="grid-image" v-if="ktheme != 'black' && goodsGridStyle" src="../../static/user/black/user-goods-card-pruple.png"></image>
						</view>
					</view>
					<view class="goods_list" v-if="goodsGridStyle">
						<view class="goods_item" :style="{'background': (ktheme == 'purple' ? '#ffffff': '#161616')}" @tap="show_nums(item)" v-for="item,id in list" :key="id">
							<image :src="item.image" mode="aspectFit" class="goods_img"></image>
							<view class="goods_info" :class="ktheme == 'black' ? 'black-info' : 'white-info'">
								<view class="goods_name">
									<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :style="{'color': knormalColor}">{{item.name}}</view>
									<n-icon size="20" name="triangledownfill" color="#333"></n-icon>
								</view>
								<view class="goods_num">
									共<text  :style="{color:knormalColor}">{{item.ownQuantity}}</text>个
								</view>
							</view>
						</view>
						<view class="none_box" v-if="list.length==0">
							<image  src="@/static/without.png" mode="widthFix"></image>
						</view>
					</view>
				</template>
			</view>
			
			<!-- 卡片样式 -->
			<!-- v-if="ktheme == 'black'" -->
			<view class="t-content" v-if="!goodsGridStyle">
				<kevy-swiper v-if="list && list.length>0" @click="swClick" @change="swChange" :autoPlay="true"
					:autoPlayInterval="5000" :list="list" :height="760" :showNum="5" :showDot="true" descAniType="slideFromRight" dotColor="linear-gradient(to bottom, #999999, #c0c0c0)" dotSelectedColor="linear-gradient(to bottom, #92ffc0, #002661)" />
			</view>
			 <!-- 海报弹框 -->
			 <uni-popup ref="posterPopup" type="center">
			 	<view class="center_poter" v-if="showPoster">
			 		<!-- posterData： 海报数据 -->
			 		<poster :posterData="posterData"></poster>
			 	</view>
			 </uni-popup>
			<!-- 未实名 -->
			<uni-popup ref="repetitionDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="跳转" title="提示" content="实名认证后才能购买数字科技商品"
					@confirm="repetitionConfirm" @close="repetitionClose"></uni-popup-dialog>
			</uni-popup>

			<uni-popup ref="thishiDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="跳转" title="提示" :content="thishiname"
					@confirm="thisConfirm" @close="thishiClose"></uni-popup-dialog>
			</uni-popup>

			<!-- 底部导航 -->
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		h5Url
	} from '@/config/config.js';
	import {
		checkLogin
	} from '@/config/mixins.js';
	import tabbar from '@/components/tabbar/tabbar.vue';
	import kevySwiper from '@/components/kevy-swiper/kevy-swiper.vue';
	import poster from '@/components/poster/poster'

	export default {
		components: {
			tabbar,
			kevySwiper,
			poster
		},
		mixins: [checkLogin],
		data() {
			return {			
				msgType: "",
				thishiname: '前置钱包开户费2元,即享初始价值100元的老卢克版权商品',
				ifwallet: false,
				walletUrl: '',
				selStyle: {
					'--buttonBcak': this.$store.state.buttonBcak,
					'--selectColorSize': this.$store.state.selectColorSize, //字体选中颜色
					'--selBcakborder': this.$store.state.selBcakborder, //选中背景线颜色
					'--onlyBackgournd': this.$store.state.onlyBackgournd, //单个背景颜色
					'--QianmenonlyBackgournd2': this.$store.state.QianmenonlyBackgournd2, //浅色单个背景颜色
					'--QianmenonlyBackgournd': this.$store.state.QianmenonlyBackgournd, //浅色单个背景颜色
				},
				showPoster: false,
				posterData: {
					// 背景
					bgImage: '/static/images/headIcon.jpg',
					// 商品链接
					url: 'https://www.apple.com.cn/iphone/'
				},
				hasLogin: false,
				userInfo: {}, // 用户信息
				userAccount: {},
				config: '', //配置信息
				isNavto: false,
				share_img: '',
				collectName: '',
				menuList: [{
						name: '我的订单',
						icon: '/static/user/icon_order.png',
						icon1: '/static/user/black/mine-order-black.png',
						url: '/pages/user/order/order'
					},  {
						name: '转售记录',
						icon: '/static/user/menu_icon/icon/1.png',
						icon1: '/static/user/black/mine-sale-black.png',
						url: '/pages/user/sale/sale?status=0'
					},
					{
						name: '转赠记录',
						icon: '/static/user/menu_icon/icon/9.png',
						icon1: '/static/user/black/mine-exchange-black.png',
						url: '/pages/user/give_record/give_record'
					},
					{
						name: '我的认证',
						icon: '/static/user/menu_icon/icon/7.png',
						icon1: '/static/user/black/mine-auth-black.png',
						url: '/pages/user/apply/apply'
					},
					{
						name: '我的客服',
						icon: '/static/user/menu_icon/icon/11.png',
						icon1: '/static/user/black/mine-server-black.png',
						url: 'server'
					},
					{
						name: '龙虎榜',
						icon: '/static/user/menu_icon/menu_icon6.png',
						icon1: '/static/user/black/mine-rank-black.png',
						url: '/pages/user/rank/rank'
					},
					{
						name: '切换主题',
						icon: '/static/user/menu_icon/icon/app-theme.png',
						icon1: '/static/user/black/mine-theme-black.png',
						url: '/pages/user/settings/theme/list'
					}
				],
		/* 		menuList1: [
					{
						name: '我的馆藏',
						icon: '/static/user/menu_icon/icon/12.png',
						icon1: '/static/user/black/mine-collect-black.png',
						url: '/pages/collection/collection'
					}, 
					
					
					
					{
						name: '邀请好友',
						icon: '/static/user/menu_icon/menu_icon8.png',
						icon1: '/static/user/black/mine-friend-black.png',
						url: 'share'
					},
					{
						name: '邀请记录',
						icon: '/static/user/menu_icon/icon/5.png',
						icon1: '/static/user/black/mine-friendlist-black.png',
						url: '/pages/user/invite/invite'
					},
					
					
				], */
				menu_list: [{
						id: 1,
						name: '我的订单',
						icon: '/static/user/menu_icon/menu_icon_1.png',
						url: '/pages/user/order/order'
					},
					{
						id: 2,
						name: '我的寄售',
						icon: '/static/user/menu_icon/menu_icon_2.png',
						url: '/pages/user/sale/sale?status=0'
					}, {
						id: 3,
						name: '合成记录',
						icon: '/static/user/menu_icon/menu_icon_3.png',
						url: '/pages/user/compound/record'
					},
					// {
					// 	id: 1,
					// 	name: '转赠记录',
					// 	icon: '/static/user/menu_icon/menu_icon_4.png',
					// 	url: '/pages/user/give_record/give_record'
					// },
					{
						id: 5,
						name: '开盒记录',
						icon: '/static/user/menu_icon/menu_icon_11.png',
						url: '/pages/user/manghe/record'
					},
					// {
					// 	id: 4,
					// 	name: '合成',
					// 	icon: '/static/user/menu_icon/menu_icon_4.png',
					// 	url: '/pages/user/compound/compound'
					// }

				],
				menu_list1: [{
						id: 1,
						name: '拉新排行榜',
						icon: '/static/user/menu_icon/menu_icon_5.png',
						url: '/pages/user/rank/rank',
					},
					{
						id: 2,
						name: '账号与安全',
						icon: '/static/user/menu_icon/menu_icon_6.png',
						url: '/pages/user/settings/settings'
					},
					{
						id: 7,
						name: '邀请记录',
						icon: '/static/user/menu_icon/menu_icon_7.png',
						url: '/pages/user/invite/invite',
					},
					{
						id: 6,
						name: '邀请奖励',
						icon: '/static/user/menu_icon/menu_icon_8.png',
						url: '/pages/user/invite/gift'
					},
				],
				menu2_list: [
					// {
					// 	id: 1,
					// 	name: '我的认证',
					// 	icon: '/static/user/menu_icon/menu_icon_9.png',
					// 	url: '/pages/user/apply/apply'
					// },
					// {
					// 	id: 2,
					// 	name: '分享金世界',
					// 	icon: '/static/user/menu_icon/menu_icon_11.png',
					// 	url: '/pages/user/invite/share'
					// },
					// {
					// 	id: 3,
					// 	name: '区块链信息查询',
					// 	icon: '/static/user/menu_icon/menu_icon_12.png',
					// 	url: 'lian'
					// },
					{
						id: 1,
						name: '关于我们',
						icon: '/static/user/menu_icon/menu_icon_9.png',
						url: 'we'
					}, {
						id: 2,
						name: '分享邀请',
						icon: '/static/user/menu_icon/menu_icon_10.png',
						url: 'share'
					},

				],
				typeList: [{
					id: 1,
					name: '数字科技商品'
				}, ],
				/**
				 * 
					{
						id: 3,
						name: '权益版权'
					},
					{
						id: 2,
						name: '盲盒'
					}
				 */
				typeId: 1,
				tabList: [{
						id: 1,
						name: '收藏中'
					},
					{
						id: 2,
						name: '转售中'
					},
					{
						id: 3,
						name: '已转售'
					}
				],
				tabId: 1,
				page: 1,
				limit: 10,
				hasNextPage: true,
				list: [],
				ums_page: 1,
				nums_limit: 12,
				nums_hasNextPage: true,
				nums_list: [],
				nums_count: 0,
				nums_name:'',
				current_id: 0,
				ifaipicture: false,
				is_pay_khf: 0,
				show_renzheng: '',
				// 是否是网格风格
				goodsGridStyle:false,
			}
		},
		onShow() {
			this.isNavto = true;
			this.initData();
			this.get_data_list();
			// this.ai_shengcheng()
			// console.log("uni.getStorageSync('updateVModelValue')-", uni.getStorageSync('updateVModelValue'))

		},
		onLoad() {
		},
		onPullDownRefresh() {
			var _this = this
			setTimeout(function() {
				uni.stopPullDownRefresh()
				_this.initData();
			}, 1000)
		},
		onReachBottom() {
			// if (!this.hasNextPage && this.$db.get('userToken')) {
			// 	this.page++;
			// 	this.get_data_list();
			// }
		},
		methods: {
			//生成海报
			openPoster() { 
				if (!(this.$db.get('userToken'))){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.showPoster = false
				uni.showLoading({
					title: '海报绘制中..'
				})
				this.$api.userInfo({}, res => {
					if (res.status) {
						let profile = res.data;
						let qrUrl = h5Url + '#/pages/login/register?invitecode=' + profile.uid;
						let posterbg = ''
						// 修改海报背景
						if(this.ktheme == 'black'){
							posterbg = '../../static/poster_black.png';
						}else{
							posterbg = require('../../static/poster.jpg');
						}
						this.posterData = {
							bgImage: posterbg,
							url: qrUrl
						}
						this.$refs.posterPopup.open()
						setTimeout(() => {
							uni.hideLoading()
							this.showPoster = true
						}, 400)
					}
				})
			},
			 //关闭海报
			hidePoster() {
				this.$refs.posterPopup.close()
			},
			avatarDefaultImage(){
				this.userInfo.avatar = '../../static/logo.png'
			},
			changeGoodsGridStyle(){
				this.goodsGridStyle = !this.goodsGridStyle
			},
			success(src) {
				this.posterSrc = src;
			},
			fail() {
				uni.showToast({
					title: '生成海报失败',
					icon: 'none'
				});
			},
			// 未实名
			// 重复弹框关闭
			repetitionClose() {
				this.$refs.reDialog.close()
			},
			//重复弹框跳转
			repetitionConfirm() {
				uni.navigateTo({
					url: "/pages/user/apply/apply"
				})
				this.$refs.reDialog.close()
			},
			thishiClose() {
				this.$refs.thishiDialog.close()
			},
			thisConfirm() {
				this.towtiaozhuan()
			},
			towtiaozhuan() {
				let data = {
					token: this.$db.get('userToken')
				}
				this.$api.gethfpay(data, res => {
					//#ifdef H5
					window.location.href = res.data.redirect_url
					// #endif
					//#ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/user/webview/webview?url=' + res.data.redirect_url
					})
					//#endif
				})
			},
			//收益详情
			fenSchedule() {
				uni.navigateTo({
					url: '/pages/user/schedule/schedule?id=1' + '&image=' + '/static/test/1.jpg' + '&shuliang=' +
						'10000' + '&jiazhi=' + '1500'
				})
			},

			thishi() {
				if (this.show_renzheng) {
					this.$refs.repetitionDialog.open()
				} else {
					console.log("----", this.userInfo.is_pay_khf)
					if (this.userInfo.is_pay_khf === 0) {
						//gethfpay
						this.$refs.thishiDialog.open()
						// let data = {
						// 	token: this.$db.get('userToken')
						// }
						// this.$api.gethfpay(data, res => {
						// 		//#ifdef H5
						// 		window.location.href = res.data.redirect_url
						// 		// #endif
						// 		//#ifdef APP-PLUS
						// 		uni.navigateTo({
						// 			url: '/pages/user/webview/webview?url=' + res.data.redirect_url
						// 		})
						// 		//#endif
						// })
					} else {
						this.walletClick()
					}
				}
			},
			//钱包
			walletClick() {
				if (this.userInfo.user_cust_id == null || this.userInfo.user_cust_id === '' || this.userInfo
					.user_cust_id === ' ') {
					uni.navigateTo({
						url: '/pages/user/wallet/wallet-list'
					})
				} else {

					// uni.removeStorageSync("ifhuifu")
					// uni.setStorageSync('ifhuifu', 1);
					this.ifwallet = true
					//this.userInfo.wallet_ur  
					// //#ifdef H5
					// uni.navigateTo({
					// 	//?                                                                                                 id_type=3&id=1
					// 	url: '/pages/user/webview/webview?url=' + this.userInfo.wallet_url
					// })
					// // #endif
					// //#ifdef APP-PLUS
					// let style = {
					// 	statusbar: {
					// 		background: "#ffffff",
					// 	}
					// }
					// const wv = plus.webview.create(this.userInfo.wallet_url, "", style);
					// wv.show()
					// // #endif


					this.$api.hfpayWallet(res => {
						console.log("res--", res.data.redirect_url)
						if (res.status) {

							//#ifdef H5
							// uni.navigateTo({
							// 	url: '/pages/user/webview/webview?url=' + res.data.redirect_url
							// })
							window.location.href = res.data.redirect_url
							// #endif
							//#ifdef APP-PLUS
							// let style = {
							// 	statusbar: {
							// 		background: "#ffffff",
							// 	}
							// }
							// const wv = plus.webview.create(res.data.redirect_url, "", style);
							// wv.show()
							this.$store.commit('ifhuifu', 1)
							uni.navigateTo({
								url: '/pages/user/webview/webview?url=' + res.data.redirect_url
							})
							//#endif
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
					// //#ifdef H5
					// window.location.href = this.userInfo.wallet_url
					// // #endif
					// //#ifdef APP-PLUS
					// plus.runtime.openURL(this.userInfo.wallet_url)
					// // #endif
				}
			},
			ai_shengcheng() {
				this.$api.getAIpicture(res => {
					this.ifaipicture = res.data
					if (res.data === '1') {
						this.ifaipicture = true
					} else {
						this.ifaipicture = false
					}
				})
			},
			copy: function(contnet) {
				console.log(contnet)
				let that = this
				if (!contnet) {
					this.$common.errorToShow('未取得区块链地址');
					return;
				}
				uni.setClipboardData({
					data: contnet,
					success() {
						that.$common.errorToShow('已复制剪贴板')
					},
					fail(r) {
						console.log(r)
					}
				})
			},
			see_id: function() {
				if (!this.hasLogin) {
					if (this.isNavto) {
						this.checkIsLogin()
						this.isNavto = false;
						return
					}
					return
				}

				if (this.userInfo.real_status != 1) {
					this.$common.errorToShow('请先实名认证', () => {
						uni.navigateTo({
							url: '/pages/user/apply/apply'
						})
					})
					return
				}
				if (this.userInfo.kmsId) {
					uni.showModal({
						content: '您的区块链ID是:' + this.userInfo.kmsId,
						confirmText: '复制',
						cancelColor: '取消',
						confirmColor: '#5884f0',
						success: (res) => {
							if (res.confirm) {
								uni.setClipboardData({
									data: this.userInfo.kmsId,
									success: () => {
										this.$common.errorToShow('已复制剪贴板')
									}
								})
							}
						}
					});
				} else {
					this.$common.errorToShow('请稍后再试')
					this.initData()
				}
			},
			go_login: function() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			initData() {
				// 获取用户信息
				var _this = this
				if (this.$db.get('userToken')) {
					this.hasLogin = true
					this.$api.userInfo({}, res => {
						if (res.status) {
							_this.userInfo = res.data
						}
					});
					this.$api.userAccount({}, res => {
						if (res.status) {
							this.userAccount = res.data;
						}
					})
					// this.get_data_list();
				} else {
					this.hasLogin = false
				}
			},
			getUserInfo(e) {
				let _this = this
				//return false;
				if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
					_this.$common.errorToShow('未授权')
				} else {
					var data = {
						open_id: _this.open_id,
						iv: e.detail.iv,
						edata: e.detail.encryptedData,
						signature: e.detail.signature
					}
					//有推荐码的话，带上
					var invitecode = _this.$db.get('invitecode')
					if (invitecode) {
						data.invitecode = invitecode
					}
					_this.toWxLogin(data)
				}
			},
			navto: function(url) {
				if (!this.hasLogin) {
					if (this.isNavto) {
						this.checkIsLogin()
						this.isNavto = false;
						return
					}
					return
				}
				if(url.startsWith('http')){
					// #ifdef H5
						window.location.href = url;
					// #endif
					// #ifdef APP-PLUS
						plus.runtime.openURL(url)
					// #endif
					return;
				}
				if (url == 'we') {
					this.$common.navigateTo('/pages/article/index?id_type=3&id=1');
					return
				}
				if (url == 'share') {
					// #ifdef H5
						if (!(this.$db.get('userToken'))){
							uni.showToast({
								title: '请先登录',
								icon: 'none'
							});
							uni.navigateTo({
								url: '/pages/login/login'
							})
							return
						}
						uni.navigateTo({
							url:`/pages/index/save-poster`
						})
					// #endif
					// #ifdef APP-PLUS
						// iOS ｜ Android
						  this.openPoster()
					// #endif
				}
				if (url == 'lian') {
					this.copy(this.userInfo.kmsId)
				}
				if (url == 'share2') {
					this.share_img = this.$store.state.config.invite_image;
					this.$refs.shareBox.open()
					return
				}
				if (url == 'server') {
					let url= 'https://work.weixin.qq.com/kfid/kfcc78aa36c0554c2b8'
					// #ifdef H5
						window.location.href = url;
					// #endif
					// #ifdef APP-PLUS
						plus.runtime.openURL(url)
					// #endif
					return
				}
				if (url == 'record') {
					uni.switchTab({
						url: '../collection/collection'
					})
				}

				if (!url) {
					this.$common.errorToShow('功能暂未开放')
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			go_order: function(id) {

				uni.navigateTo({
					url: 'order/order?status=' + id
				})
			},
			typeChange(id) {
				this.typeId = id;
				this.get_data_list()
			},
			tabChange(id) {
				this.tabId = id;
				this.get_data_list()
			},
			get_data_list: function() {
				this.page = 1;
				this.list = []
				this.hasNextPage = true;
				let data = {
					pageNo: this.page,
					pageSize: 198,
					itemType: this.current_cate,
					// status: this.current_status,
					// keyword: this.keyword
				}
				this.$api.getCollectionList(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
			//当点击图片时返回图片下标，用于跳转之类业务
			swClick(idx) {
				let item = this.list[idx]
				this.show_nums(item)
				// console.log("当前点击的图片下标为：" + idx)
			},
			//当切换后返回当前下标
			swChange(idx) {
				// console.log("当前中间图片的下标为：" + idx)
			},
			show_nums: function(item) {
				let url = `/pages/collection/collection-list?nums_count=${item.ownQuantity}&nums_name=${item.name}&iid=${item.iid}`
				uni.navigateTo({
					url:url
				})
			},
		},
		computed: {
			logoImage() {
				return this.$store.state.config.shop_logo;
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-dialog-title-text {
		color: orange !important;
		font-size: 39rpx;
	}

	/deep/.uni-dialog-content-text {
		font-size: 35rpx;
	}

	.wrapper {
		width: 100%;
		padding: calc(36rpx + var(--status-bar-height)) 0 80rpx;
		position: relative;
		z-index: 2;

		.contain {
			padding: 0 40rpx;
		}

		.userWrap {
			width: 100%;
			// height: 343rpx;
			position: relative;

			.userBg {
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
			}

			.user-headerBg-black{
				// background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
			}
			.user-headerBg-white{
				background-color:rgba(255, 255, 255, 0.9);
			}
			.user-headerText-black{
				color: #FFFFFF;
			}
			.user-headerText-white{
				color: #333333;
			}
			.userCont {
				width: 100%;
				height: 100%;
				padding: 34rpx 10rpx 0rpx 10rpx;
				position: relative;
				z-index: 1;
				border-radius: 20rpx;
				.author {
					padding: 0 11rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.avatar {
						width: 120rpx;
						height: 120rpx;
						// display: block;
						border-radius: 50%;
					}
					.user {
						margin-left: 20rpx;
						display: flex;
					    flex-direction: column;
						.name {
							display: flex;
							flex-direction: row;
							align-items: center;
							text {
								margin-top: 12rpx;
								font-size: 32rpx;
							}
							image {
								margin-left: 10rpx;
								margin-top: 14rpx;
								width: 75rpx;
								display: block;
							}
						}

						.tel {
							font-size: 26rpx;
							margin-top: 6rpx;
							opacity: 0.6;
						}

						.tip {
							font-size: 24rpx;
							// color: #666;
							margin-top: 10rpx;
						}
					}
				}

				.areacode {
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 26rpx 0 21rpx;

					.code {
						width: 546rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text {
							font-size: 24rpx;
							font-weight: bold;
						}
					}
					.copy {
						width: 20rpx;
						height: 20rpx;
						display: block;
					}
				}
				
				.operate-bg-black{
					background: linear-gradient(to bottom,RGBA(71, 62, 48, 0.65), #1C1C1B 100%);
				}
				.operate-bg-white{
					background: white;
				}
				.operate {
					margin-top: 30rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item {
						width: 300rpx;
						height: 120rpx;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 70rpx;
							height: 70rpx;
							display: block;
						}
						text {
							font-size: 30rpx;
							margin-left: 9rpx;
						}
					}
				}
			}

			.setting {
				width: 34rpx;
				height: 32rpx;
				display: block;
				position: absolute;
				top: 51rpx;
				right: 32rpx;
				z-index: 2;
			}
		}

		.menuWrap {
			width: 100%;
			padding: 36rpx 0 22rpx;
			background-color: $bg-box;
			box-shadow: 0 6rpx 20rpx 1rpx rgba(0, 0, 0, .11);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;
			
			.item {
				width: 25%;
				text-align: center;
				margin-top: 33rpx;
				.item-img-black {
					// width: 100rpx;
					// height: 90rpx;
					width: 46rpx;
					height: 46rpx;
					display: block;
					margin: 0 auto;
				}
				.item-img-white {
					width: 46rpx;
					height: 46rpx;
					display: block;
					margin: 0 auto;
				}
				.label {
					font-size: 24rpx;
					color: #333;
					margin-top: 16rpx;
				}
			}

			&>view:nth-child(-n+4) {
				margin-top: 0;
			}
		}

		.sticky {
			width: 100%;
			margin-top: 20rpx;
			
			
			.scrollWrap {
				width: 100%;
				height: 88rpx;
				box-sizing: border-box;
				background-color: rgba(255, 255, 255, .64);
				white-space: nowrap;
				margin-top: 10rpx;

				.list {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.item {
						font-size: 32rpx;
						color: #666;
						position: relative;
					}

					.selected {
						// color: $text-zdy;
						color: var(--selectColorSize);
						font-weight: bold;
					}

					.selected::after {
						display: block;
						clear: both;
						content: '';
						width: 63rpx;
						height: 10rpx;
						// background: linear-gradient(308deg, #FE005A 0%, #FF5B6C 100%);
						background: var(--selBcakborder);
						border-radius: 100rpx;
						position: absolute;
						left: 50%;
						bottom: -10rpx;
						z-index: 2;
						transform: translateX(-50%);
					}
				}
			}
		}

		.shop {
			width: 100%;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.item {
				width: 325rpx;
				height: 455rpx; // 425rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10rpx;
				margin-top: 20rpx;

				.cover {
					width: 305rpx;
					height: 305rpx;
					border-radius: 20rpx;
				}

				.intro {

					width: 100%;
					padding: 20rpx 4rpx 0 11rpx;

					.name {

						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						color: #000;
						font-weight: 400;
					}

					.num {
						font-size: 20rpx;
						color: #999;
						margin-top: 15rpx;
					}
				}
			}

			.noneBox {
				width: 534rpx;
				margin: 117rpx auto;

				image {
					width: 100%;
				}
			}

			&>view:nth-child(-n+2) {
				margin-top: 0;
			}
		}
	}

	/deep/ .uni-popup {
		z-index: 99999;
	}

	.collect_box {
		width: 100%;
		min-height: 340rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 18rpx;

		.collect_name {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			color: #141519;
			font-weight: bold;

			.collect_num {
				margin-left: 10rpx;
				// font-size: 24rpx;
				color: #ABA9B4;
			}

			.collect_num_fenhong {
				font-size: 27rpx;
				color: #9872d4;
				text-align: right;

			}
		}

		.tips {
			font-size: 24rpx;
			color: #ABA9B4;
			margin-top: 10rpx;
		}

		// 	.collect_list {
		// 		width: 100%;
		// 		min-height: 155rpx;
		// 		max-height: 800rpx;
		// 		overflow: auto;
		// 		display: flex;
		// 		align-items: center;
		// 		flex-wrap: wrap;
		// 		margin-top: 20rpx;

		// 		.cyz {
		// 			background-color: var(--QianmenonlyBackgournd);
		// 		}

		// 		.zsz {
		// 			background-color: var(--QianmenonlyBackgournd2);
		// 		}

		// 		.collect_item {
		// 			width: 220rpx;
		// 			height: 135rpx;
		// 			// background-color: var(--QianmenonlyBackgournd);
		// 			// background-color: #FFF0F2;
		// 			border-radius: 20rpx;
		// 			display: flex;
		// 			align-items: center;
		// 			justify-content: center;
		// 			flex-direction: column;
		// 			position: relative;
		// 			padding-top: 42rpx;
		// 			margin-right: 12rpx;
		// 			margin-bottom: 20rpx;

		// 			.status {
		// 				display: inline-block;
		// 				padding: 2rpx 10rpx 2rpx 19rpx;
		// 				// background-color: #FCC9CB;
		// 				background: var(--onlyBackgournd);
		// 				border-radius: 0 20rpx 0 20rpx;
		// 				font-size: 20rpx;
		// 				color: #ffffff;
		// 				// color:var(--selectColorSize);
		// 				position: absolute;
		// 				top: 0;
		// 				right: 0;
		// 			}

		// 			.collect_code {
		// 				font-size: 24rpx;
		// 				color: #7A7A7A;
		// 			}

		// 			.collect_price {
		// 				width: 100%;
		// 				text-align: center;
		// 				font-size: 28rpx;
		// 				color: #141519;
		// 				font-weight: bold;
		// 			}
		// 		}

		// 		&>view:nth-child(3n) {
		// 			margin-right: 0;
		// 		}
		// 	}
		// }
	}

	.see_more {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #9a99a2;
	}

	.confirm {
		width: 524rpx;
		height: 84rpx;
		background: var(--buttonBcak); // $btn-bg;
		border-radius: 100rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		color: #fff;
		margin: 0 auto;
	}

	.share_img {
		width: 630rpx;
		height: 864rpx;
		border-radius: 20rpx;
		margin-bottom: 60rpx;
	}
</style>

<style lang="scss">
	.apply {
		margin-right: 5rpx;

		.apply-img {
			width: 86rpx;
			height: 28rpx;

		}
	}

	.menu2 {
		width: 100%;
		margin-bottom: 20rpx;

		border-radius: 20rpx;
		padding: 0 24rpx;
		background: $bg-box;


		.menu_item2 {
			height: 109rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #DCDCDC;
			font-size: 24rpx;
			font-weight: bold;
			color: #333;

			.menu2_tips {
				font-size: 24rpx;
				font-weight: 400;
				color: #93B6D6;
			}

			.menu2_icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 19rpx;
			}
		}

		.menu_item2:nth-last-child(1) {
			border: none;
		}
	}

	// .menu_icon {
	// 	height: 43rpx;
	// 	width: 49rpx;
	// 	margin-bottom: 14rpx;
	// }

	// .menu_btn_list {
	// 	width: 100%;

	// 	display: grid;
	// 	grid-template-columns: repeat(4, 25%);
	// 	grid-template-rows: repeat(2, 140rpx);
	// }

	// .item {}

	.order_icon {
		width: 38rpx;
		height: 44rpx;
		margin-bottom: 14rpx;
	}

	// .order_item {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	flex-direction: column;
	// 	font-size: 28rpx;
	// 	color: #333;
	// 	position: relative;
	// }

	.menu_icon {
		height: 43rpx;
		width: 49rpx;
		margin-bottom: 14rpx;
	}

	.menu_btn_list {
		width: 100%;
		// padding-top: 40rpx;
		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-template-rows: repeat(2, 140rpx);

		border-radius: 20rpx;
		background: $bg-box;
		border: 1rpx $text-zdy solid;
	}

	.container {
		width: 100%;
		padding: 0rpx 30rpx;

	}

	.user_info_box {
		width: 100%;
		// height: 371rpx;
		position: relative;

		.user_info_bottom {
			width: 100%;
			padding-top: 40rpx;

			.btn_box {
				width: 100%;
				display: flex;
				align-items: center;

				justify-content: space-between;
				padding-top: 30rpx;

				.bg1 {
					background: linear-gradient(180deg, #E9ECFF 0%, #D9DEFF 100%);
				}

				.bg2 {
					background: linear-gradient(180deg, #FFF3DD 0%, #FFEDBE 100%);
				}

				.btn_bottom {
					width: 325rpx;
					height: 99rpx;

					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: bold;
					color: #333;

					.btn_icon {
						width: 41rpx;
						height: 41rpx;
						margin-right: 15rpx;
					}

				}
			}

			.block_box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 33rpx;
				font-size: 26rpx;
				color: #333;

				.block_box-kms {
					width: 80%;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.icon_copy {
					width: 20rpx;
					height: 20rpx;
					margin-left: 19rpx;
				}
			}
		}

		.user_info_panel {
			position: relative;
			z-index: 2;
			padding: 160rpx 35rpx 30rpx 35rpx;

			.settings_btn {
				width: 158rpx;
				height: 58rpx;
				top: 190rpx;
				right: 23rpx;
				position: absolute;
				border: 1px solid #999;
				color: #999;
				border-radius: 27rpx;
			}

			.user_info_top {
				width: 100%;
				display: flex;
				align-items: center;

				.user_head {
					width: 99rpx;
					height: 99rpx;
					margin-right: 10rpx;
					border-radius: 50%;
				}

				.user_name_box {
					flex: 1;
					font-size: 36rpx;
					font-weight: bold;
					color: #333;

					.qukuailian {
						font-size: 24rpx;
						font-weight: normal;
						display: flex;
						align-items: center;


						.copy_btn {
							width: 20rpx;
							height: 20rpx;
							margin-left: 5rpx;
						}
					}
				}

			}
		}

		.user_info_bg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
		}

	}

	.user_box {
		width: 100%;
		// padding: 37rpx 30rpx;
		// padding-top: 80rpx;
	}
	
	.goods_list {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	
		.goods_item {
			position: relative;
			width: 48%;
			height: 458rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 30rpx;
			box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(156, 156, 156, 0.6);
	
			.goods_img {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 0;
				border-radius: 20rpx;
				display: block;
			}
			.black-info{
				backdrop-filter: blur(20px);
				box-shadow: inset 0px 0px 10px RGBA(163, 182, 101, 0.5);
			}
			.white-info{
				background: white;
			}
			.goods_info {
				position: relative;
				border-radius: 10rpx;
				position: absolute;
				left: 10rpx;
				right: 10rpx;
				bottom: 10rpx;
				padding: 20rpx 17rpx;
				// width: 100%;
				z-index: 1;
				.goods_name {
					display: flex;
					justify-content: space-between;
					align-items: center;
	
					font-size: 28rpx;
					font-weight: bold;
					color: #141519;
				}
	
				.goods_num {
					font-size: 22rpx;
					color: #999;
					padding-top: 12rpx;
				}
			}
		}
	
		.none_box {
			width: 534rpx;
			margin: 117rpx auto;
			font-size: 32rpx;
			color: #ABA9B4;
		}
	
		.none_box image {
			width: 100%;
			height: 534rpx;
			margin-bottom: 10rpx;
		}
	}
	
	.t-content {
		margin-top: -40rpx;
		margin-bottom: 40rpx;
	}
	.gridStyle{
		display: flex;
		flex-direction: row;
		.grid-text{}
		.grid-image{
			margin-left: auto;
			margin-right: 40rpx;
			width: 45rpx;
			height: 45rpx;
		}
	}
	
	.tab_box {
		width: 100%;
		// padding: 30rpx 70rpx 0;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		justify-content: space-around;
	   
		.tab_dd {
			 margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 32rpx;
			color: var(--tabNormalColor);
			font-weight: 400;
			position: relative;
			image {
			  width: 223rpx;
			  height: 11rpx;
			}
			text {
			  margin: 0 20rpx;
			}
		}
	
		.tabActive {
			color: var(--selectColorSize);
			font-weight: bold;
		}
	
		.tabActive::after {
			display: block;
			clear: both;
			content: '';
			width: 65%;
			height: 10rpx;
			// background:red;
			background: var(--selBcakborder);
			border-radius: 100rpx;
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			transform: translateX(-50%);
		}
	}
</style>